<script lang="ts" setup>
import MessageCom from '../../components/MessageCom.vue';
import { ref, type Ref } from 'vue';

const list:Ref<any[]> = ref([
  {className: 'iconfont icon-xitongtongzhi', 
  title: '系统通知', 
  content: '您的审核已通过。'},
  {className: 'iconfont icon-xitongtongzhi1', 
  title: '订单通知', 
  content: '订单交易关闭。'},
  {className: 'iconfont icon-huodongtongzhi', 
  title: '活动通知', 
  content: '领券商品更优惠，享受折上折,还有更多优惠,点击了解。'}
]);
</script>
<template>
  <main>
    <div class="head">
      <h2>消息</h2>
    </div>

    <div>
      <!-- 定义组件 父传子 -->
      <MessageCom :list="list"></MessageCom>
      <!-- <div v-for="item in 3">
        <p class="message">
          <span class="iconfont icon-xitongtongzhi"></span>
        <div>
          <span class="title">系统通知</span>
          <nav>您的审核已通过。</nav>

        </div>
        </p>
        <hr>
      </div> -->
    </div>



  </main>

</template>

<style lang="scss" scoped>
main {
  overflow: auto;
  width: 100%;
}
.head {
  // width: 99%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  // background-color: aquamarine;
}

</style>